<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>播放页面</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
	</head>
	<body>
		<div class="header">
			<div class="header-bd">
				<div class="nav">
					<span class="fa fa-bars" aria-hidden="true"></span>
					导航
					<span class="fa fa-caret-down" aria-hidden="true"></span>
				</div>
				<div class="nav-list">
					<div>
						<label>电影</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>电视剧</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
					<div>
						<label>动漫</label>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
						<a href="#">动作</a>
					</div>
				</div>
				<div class="logo"><img src="img/logo.png" alt="" /></div>
				<div class="search">
					<div class="top">
						<div class="input-search">
							<input type="text" name="" id="" value="" />
							<a href="#"><img src="img/search.png" alt="" /></a>
						</div>
						<div class="ranking">
							<a href="#"><img src="img/ranking.png" alt="" /></a>
						</div>
					</div>
					<ul>
						<li><a href="#">权利的游戏</a></li>
						<li><a href="#">纸牌屋</a></li>
						<li><a href="#">斯巴达克斯</a></li>
						<li><a href="#">太阳的后羿</a></li>
						<li><a href="#">欢乐颂</a></li>
					</ul>
				</div>
				<div class="sign">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>			
		</div>
		<div class="all-bd">
			<!--播放器-->
			<div class="video">
				<p class="p-tilte"><span>但是开机后点击</span>&nbsp;<span>东方大厦</span>&nbsp;<span>01</span></p>
				<div class="play">
					<div class="player">
						<div id="a1"></div>
					</div>
					<div class="detail">
						<ul class="t-tab">
							<li class="li-xz">简介</li>
							<li>剧集选择</li>
						</ul>
						<div class="jianjie" >
							<div class="title">
								权利的游戏
							</div>
					        <ul class="jj-ul">
					        	<li>类型：<span>科幻爱情</span></li>
					        	<li>导演：<span>史蒂芬·库里</span></li>
					        	<li>主演：<span>史蒂芬·库里 史蒂芬·库里 史蒂芬·库里</span></li>
					        	<li>简介：
					        		<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
					        		<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
					        	</li>
					        </ul>					        
						</div>
						<div class="jianjie" style="display: none;">
							<ul class="fj-ul">
					        	<li><a href="#" class="a-ch">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>	
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>
					        	<li><a href="#">01</a></li>	
					        </ul>
					        <div class="scroll-y">
					        	<div class="st">
					        		<div class="scroll-btn"></div>
					        	</div>					        	
					        </div>
						</div>						
					</div>
				</div>
				<div class="indrr">
					<div class="gn">
						<a class="fa fa-commenting-o" aria-hidden="true" href="#"></a>
						<a class="pinglun" href="#">1000评论</a>
						<a class="fa fa-share-alt" aria-hidden="true" href="#"></a>
						<a href="#" class="fengx">分享</a>
						<a class="fa fa-weibo" aria-hidden="true" href="#"></a>
						<a class="fa fa-weixin" aria-hidden="true" href="#"></a>
						<a class="fa fa-qq" aria-hidden="true" href="#"></a>
						<a href="#"><div class="loadx"><img src="img/download.png" alt="" /><span>下载</span></div></a>
						<a class="fa fa-caret-square-o-right padding-100" aria-hidden="true" href="#"></a>
						<a class="fengx" href="#">1000万</a>
						<a  class="fa fa-thumbs-o-up" aria-hidden="true" href="#"></a>
						<a class="fengx" href="#">10000</a>
					</div>
					<div class="guanggao"></div>
				</div>
			</div>
			
			<!--still like-->
			<div class="enjoy">
				<p class="big-style">看过此片的还喜欢</p>
				<ul class="only">
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>
					<a href="#">	
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>	
					<a href="#">
						<li>
							<img src="img/film.jpg" alt="" />
						    <p class="c-title">画皮简介简介简介</p>
					        <p class="c-word">简介简介简介</p>
					        <span class="bj">独播</span>
						</li>
					</a>										
				</ul>
			</div>
			<div class="advier"></div>
			<!--评论-->
			<div class="enjoy">
				<p class="big-style">评论<span class="tj">排行推荐</span></p>
				<div class="ment">
					<p><span>文明上网理性发言，请遵守新闻评论服务协议</span><span class="munb">11条评论</span></p>
					<textarea class="inflow"></textarea>
					<p><a href="#" class="fabiao">登陆后发表</a></p>
					<ul class="tab-pl">
						<li class="li-g">所有评论</li>
						<li>我的点评</li>
					</ul>
					<div class="pl-detail">
						<div class="pic">
							<img src="img/3.jpg" alt="" />
						</div>
						<div class="right-sr">
							<p><span>用户名字</span><span class="timer">10分钟前</span><span class="jb">举报</span></p>
							<p class="content">时间大家都了解奥斯卡来得及啊开始了就打开撒角度来看撒娇的空间撒开了多久啊水利科技的历史</p>
							<p>
								<span class="make">赞</span>
								<span class="count">(50)</span>
								<span class="make">回复</span>
								<span class="count">(1)</span>
								<span class="make">分享</span>
							</p>
							<div class="inflow-argin">
								<input type="text" name="" value="" />
								<span>输入0/140字</span>
								<span class="answer">回复</span>
							</div>
							<div class="pl-detail">
								<div class="pic">
									<img src="img/3.jpg" alt="" class="img-s"/>
								</div>
								<div class="right-sr">
									<p><span>用户名字</span><span class="timer">10分钟前</span></p>
									<p class="content">时间大家都了解奥斯卡来得及啊开始了就打开撒角度来看撒娇的空间撒开了多久啊水利科技的历史</p>
									<p>
										<span class="make">赞</span>
										<span class="count">(50)</span>
										<span class="make">回复</span>
										<span class="count">(1)</span>
									</p>									
								</div>
							</div>
							<div class="pl-detail">
								<div class="pic">
									<img src="img/3.jpg" alt="" class="img-s"/>
								</div>
								<div class="right-sr">
									<p><span>用户名字</span><span class="timer">10分钟前</span></p>
									<p class="content">时间大家都了解奥斯卡来得及啊开始了就打开撒角度来看撒娇的空间撒开了多久啊水利科技的历史</p>
									<p>
										<span class="make">赞</span>
										<span class="count">(50)</span>
										<span class="make">回复</span>
										<span class="count">(1)</span>
									</p>									
								</div>
							</div>
							<a href="#" class="more">查看更多回复</a>
						</div>
					</div>
					<div class="ym">
						<div class="fy">上一页</div>
						<ul>
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
						</ul>
						<div class="fy">下一页</div>
					</div>
					
				</div>
				<div class="paiming">
			    	<ul>
			    		<a href="#">
			    			<li class="lione">
				    			<img src="img/film.jpg" alt="" />
				    			<span class="number">1</span>
				    		</li>
			    		</a>
			    		<a href="#">
				    		<li>
				    			<span>2</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
			    		<a href="#">
				    		<li>
				    			<span>3</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
				    	<a href="#">
				    		<li>
				    			<span>4</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/up.png" alt="" />
				    		</li>
				    	</a>
				    	<a href="#">
				    		<li>
				    			<span>5</span>
				    			<span class="callname">花千骨</span>
				    			<img src="img/down.png" alt="" />
				    		</li>
				    	</a>
			    	</ul>
			    	<a href="#" class="more-paihang">更多排行</a>
			    	<a href="#">
			    	    <div class="guanggao">
			    	    </div>
			    	</a>			    	
			    </div>
			</div>	
	    </div>
	    <!--footer-->
	    <div class="footer">
	    	<div class="footer-bd">
	    		<ul>
	    			<li><a href="#">公司介绍</a>|</li>
	    			<li><a href="#">新闻动态</a>|</li>
	    			<li><a href="#">联系方式</a>|</li>
	    			<li><a href="#">招聘英才</a>|</li>
	    			<li><a href="#">帮助与反馈</a>|</li>
	    			<li><a href="#">侵权投诉</a>|</li>
	    			<li><a href="#">About Us</a></li>
	    		</ul>
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	    <script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="js/ckplayer.js" charset="utf-8"></script>
	    <script type="text/javascript">
	         var flashvars={
				f:'http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4',
				c:0,
				b:1,
				i:'http://www.ckplayer.com/static/images/cqdw.jpg'
				};
			var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
			CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','820','461',flashvars,params);	
			function closelights(){//关灯
				alert(' 本演示不支持开关灯');
			}
			function openlights(){//开灯
				alert(' 本演示不支持开关灯');
			}
			//tab
			$('.fj-ul li a').click(function(){
				$('.fj-ul li a').removeClass('a-ch');
				$(this).addClass('a-ch');
			})
			//tab-简介
			$('.t-tab li').each(function(index){
				$(this).click(function(){
					$(this).addClass('li-xz').siblings().removeClass('li-xz');
					$('.jianjie').eq(index).css({'display':'block'}).siblings('.jianjie').css({'display':'none'});
				})				
			})
			$('.only li').each(function(index){
				index=(index+1)*5-1;
				$('.only li').eq(index).addClass('li-none');
			})
			//滚动条
			$('document').ready(function(){
				var fjHeight=Math.ceil($('.fj-ul li').length/5)*52,				    
				    bl=380/fjHeight*$('.scroll-y').height(),
				    pp=380-bl;				    
				if(Math.ceil($('.fj-ul li').length/5)*52<=380){
					$('.scroll-btn').height()=0; 
				}else{
					$('.scroll-btn').height(bl);					
					$('.fj-ul').scroll(function(){
						var scrollHeight=$('.fj-ul').scrollTop(),
				            scrollBl=scrollHeight/fjHeight*$('.scroll-y').height();
						$('.scroll-btn').animate({'top':scrollBl},10)
					})
				}
				$(function(){  
				var _move=false;//移动标记  
				var _x,_y;//鼠标离控件左上角的相对位置  
				    $(".scroll-btn").mousedown(function(e){  
				        _move=true;  
				        _x=e.pageX-parseInt($(".scroll-btn").css("left"));  
				        _y=e.pageY-parseInt($(".scroll-btn").css("top"));  			       
				    });  
				    $(document).mousemove(function(e){  
				        if(_move){  
				            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
				            var y=e.pageY-_y;
				            if(y>=0&&y<=pp){
				            	var oo=y/380*fjHeight;
				            	$(".scroll-btn").css({top:y});
				            	$('.fj-ul').scrollTop(oo)//控件新位置
				            }				           
				        }  
				    }).mouseup(function(){  
				    _move=false;  			   
				    });  
			    });
			})
			//输标拖动			
	    </script>
	</body>
</html>
